<template>
	<view class="page cabinet-receive">
		<!-- 商品分类 -->
		<view class="list-box">
			<view v-if="goodsList.length>0" class="list">
				<template v-for="(goods, g) in goodsList">
					
					<view class="select-item">
						<image v-if="goods.checked" @click="handleSelect(g)" src="@/static/cabinet/icon-radio.png" class="radio-checked"></image>
						<view v-else @click="handleSelect(g)" class="radio"></view>
						
						<view class="item" :key="g">
							<u-image :src="goods.product_image" width="160" height="160" border-radius="16" mode="widthFix"></u-image>
							<view class="info-box">
								<view class="name">{{goods.product_name}}</view>
								
								<view class="price">
									<text class="label market">参考价</text>
									<text class="unit market">¥ </text>
									<text class="money market">{{goods.product_price}}</text>
									<text class="label blind" v-if="goods.source==1">拆盒价</text>
									<text class="label blind" v-else>购买价格</text>
									<text class="unit blind">¥ </text>
									<text class="money blind">{{goods.blind_box_price}}</text>
								</view>
							</view>
						</view>
					</view>
					
					
				</template>
			</view>
			<view v-else class="empty-box">
				<u-empty mode="list"></u-empty>
			</view>
		</view>
		
		<!-- 相关操作 -->
		<view class="action-wrap">
			<view class="blank-block"></view>
			<view class="action-box">
				<view @click="handleGive()" class="button">已选{{selectCount}}件, 确定接收</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				loading: false,
				current: 0,
				goodsList: [],
				id: '',
				share_id: '',
				info: ''
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			selectCount() {
				return this.goodsList.filter(item => { return item.checked }).length
			}
		},
		onLoad(option) {
			this.id = option.id
			this.share_id = option.share_user
		},
		onShow() {
			this.getList()
		},
		methods: {
			...mapActions(['setUser']),
			viewPage(id) {
				uni.navigateTo({
					url: `/pages/index/query?id=${id}`
				})
			},
			// 授权登录
			getUserProfile() {
				let that = this
				this.router('/pages/login/index')
				return
				wx.getUserProfile({
					desc: '用于完善个人信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						that.updateUser(res.userInfo)
					}
				})
			},
			updateUser(data) {
				this.$net.req('/user/update', {
					data
				}).then(res => {
					// return
					if (res.code == 200) {
						this.setUser(data)
						this.getMine()
					}
				})
			},
			getMine() {
				this.$net.req('/user/getMine', {}).then(res => {
					if (res.code === 200) {
						this.setUser(res.data)
					}
				})
			},
			handleGive() {
				if(this.userInfo.nickName == ''){
					uni.showToast({
						title: '请先授权',
						icon: 'none'
					})
					this.getUserProfile()
					return
				}
				if(this.loading) return
				this.loading = true
				let order_blind_box_ids = []
				this.goodsList.forEach(item=>{
					if(item.checked){
						order_blind_box_ids.push(item.order_blind_box_id)
					}
				})
				let data = {
					give_blind_box_id: this.id,
					order_blind_box_ids: order_blind_box_ids
				}
				
				this.$net.req('/order/receive',data).then(res=>{
					this.loading = false
					
					if(res.code == 200){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						
						setTimeout(()=>{
							uni.navigateTo({
								url: '/pages/cabinet/list'
							})
						},1500)
					}else if(res.code==50002){
						uni.showModal({
						    title: '提示说明',
						    content: '您的好友玉石余额不足，赠送您的商品目前不能接收，请联系您的好友',
							showCancel:false,
						    success: function (res) {
						        if (res.confirm) {
						            
						        } else if (res.cancel) {
						            
						        }
						    }
						});
					}
				})
			},
			handleSelect(index) {
				let item = this.goodsList[index]
				this.goodsList[index].checked = !item.checked
			
			},
			getList() {
				let give_blind_box_id = this.id
				this.$net.req('/order/giveDetail', {give_blind_box_id}).then(res => {
					if (res.code === 200) {
						res.data.order_blind_boxs.map(item=>{
							this.$set(item, 'checked', false)
						})
						this.goodsList = res.data.order_blind_boxs
						this.info = res.data.give_blind_box
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page.cabinet-receive {
		.list-box {
			width: 100%;
			border-radius: 20rpx;
			margin-top: 30rpx;
			
			.list {
				width: 100%;
				padding: 30rpx 24rpx;
				
				.select-item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 24rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.radio {
						width: 48rpx;
						height: 48rpx;
						border: 2rpx solid #DEDEDE;
						border-radius: 50%;
					}
					.radio-checked {
						width: 52rpx;
						height: 52rpx;
					}
					
					.item {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						width: 634rpx;
						height: 308rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						padding: 32rpx 20rpx;
						
						.info-box {
							width: 414rpx;
							
							.name {
								height: 72rpx;
								font-size: 28rpx;
								font-weight: bold;
								color: #101010;
								line-height: 36rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
							
							.date-time {
								height: 32rpx;
								font-size: 24rpx;
								color: #C3C2C1;
								line-height: 32rpx;
								margin-top: 16rpx;
							}
							
							.tips-box {
								margin-top: 16rpx;
								
								.tips {
									display: inline-block;
									height: 40rpx;
									line-height: 40rpx;
									font-size: 20rpx;
									color: #F69D56;
									background: rgba(246, 157, 86, 0.16);
									border-radius: 8rpx;
									padding: 0 12rpx;
								}
								
							}
							
							.price {
								height: 40rpx;
								line-height: 40rpx;
								margin-top: 36rpx;
								text-align: right;
								
								.label {
									font-size: 24rpx;
									color: #C3C2C1;
									
									&.blind {
										color: #DFC791;
										margin-left: 20rpx;
									}
								}
								
								.unit {
									color: #2E2B2B;
									font-size: 24rpx;
									&.blind {
										color: #DFC791;
									}
								}
								
								.money {
									font-weight: bold;
									color: #2E2B2B;
									font-size: 32rpx;
									&.blind {
										color: #DFC791;
									}
								}
							}
							
						}
					}
					
				}
			
				
			}
			
			.empty-box {
				min-height: 60vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		.action-wrap {
			.blank-block {
				width: 100%;
				height: 160rpx;
			}
			.action-box {
				width: 100%;
				height: 160rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 0 0;
				box-shadow: 0 0 6rpx rgba($color: #000000, $alpha: 0.16);
				padding: 32rpx 24rpx;
				
				.button {
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: bold;
					color: #2E2B2B;
					background: #DFC791;
					border: 3rpx solid #2E2B2B;
					border-radius: 16rpx;
				}
			}
			
			&.confirm {
				.blank-block {
					height: 868rpx;
				}
				.action-box {
					width: 100%;
					height: 868rpx;
					
					.title {
						height: 48rpx;
						font-size: 36rpx;
						font-weight: bold;
						color: #101010;
						line-height: 48rpx;
						text-align: center;
					}
					
					.guild-box {
						margin-top: 48rpx;
						
						.header {
							height: 48rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #101010;
							line-height: 48rpx;
						}
						
						.flow {
							display: flex;
							align-items: center;
							margin-top: 32rpx;
							
							.item {
								flex: 1;
								display: flex;
								flex-direction: column;
								align-items: center;
								width: 216rpx;
								position: relative;
								
								.arrow {
									width: 60rpx;
									height: 30rpx;
									position: absolute;
									top: 30rpx;
									right: -30rpx;
								}
								
								.icon {
									width: 80rpx;
									height: 80rpx;
								}
								
								.step {
									height: 36rpx;
									font-size: 28rpx;
									font-weight: bold;
									color: #333333;
									line-height: 36rpx;
									margin-top: 10rpx;
								}
								
								.tips {
									height: 32rpx;
									font-size: 24rpx;
									color: #666666;
									line-height: 32rpx;
									margin-top: 10rpx;
								}
							}
						}
					
						.rules {
							padding: 32rpx 0;
							border-bottom: 2rpx solid #F0F0F0;
							
							
							.text {
								font-size: 28rpx;
								color: #666666;
								line-height: 36rpx;
								margin-bottom: 16rpx;
								
								&:last-child {
									margin-bottom: 0;
								}
							}
						}
						
					}
				
					.button {
						margin-top: 106rpx;
					}
				}
			}
				
		}
		
	}
</style>
